<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<!-- 引入统一样式文件 -->
<link rel="stylesheet" href="../static/css/library-common.css">

<div class="card">
    <button class="btn btn-primary" onclick="openAddModal()">新增图书</button>
    <button class="btn btn-secondary" onclick="window.location.href='book?action=exportExcel'">
        导出
    </button>
    <button class="btn btn-success" onclick="showUploadModal()">
        上传
    </button>

    <!-- 错误信息展示区域 -->
    <c:if test="${not empty errorMsg}">
        <div style="margin: 15px 0; padding: 10px; background-color: #fff1f0; border: 1px solid #ffe3e3; border-radius: 6px; color: #cf1322;">
            <strong>导入失败：</strong>${errorMsg}
        </div>
    </c:if>
    <c:if test="${not empty successMsg}">
        <div style="margin: 15px 0; padding: 10px; background-color: #f6ffed; border: 1px solid #d9f7be; border-radius: 6px; color: #52c41a;">
            <strong>导入成功：</strong>${successMsg}
        </div>
    </c:if>

    <div class="search-bar">
        <form action="book" method="get">
            <input type="hidden" name="action" value="list">
            <input type="text" name="isbn" placeholder="输入ISBN" value="${param.isbn}"/>
            <input type="text" name="title" placeholder="输入书名" value="${param.title}"/>
            <input type="text" name="author" placeholder="输入作者" value="${param.author}"/>
            <input type="text" name="publisher" placeholder="输入出版社" value="${param.publisher}"/>
            <button type="submit" class="btn btn-primary">搜索</button>
        </form>
    </div>

    <table>
        <thead>
        <tr>
            <th>序号</th>
            <th>ISBN</th>
            <th>书名</th>
            <th>作者</th>
            <th>出版社</th>
            <th>出版日期</th>
            <th>创建时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${books}" var="book" varStatus="status">
            <tr align="center">
                <td>${status.count}</td>
                <td>${book.isbn}</td>
                <td>${book.title}</td>
                <td>${book.author}</td>
                <td>${book.publisher}</td>
                <td><fmt:formatDate value="${book.publishDate}" pattern="yyyy/MM/dd"/></td>
                <td><fmt:formatDate value="${book.createdAt}" pattern="yyyy/MM/dd HH:mm"/></td>
                <td>
                    <a href="javascript:void(0)"
                       onclick="openEditModal(
                           ${book.id},
                               '${book.isbn}',
                               '${book.title}',
                               '${book.author}',
                               '${book.publisher}',
                               '<fmt:formatDate value="${book.publishDate}" pattern="yyyy-MM-dd"/>'
                               )"
                       style="color: #1890ff; margin-right: 10px;">修改</a>
                    <a href="javascript:void(0)"
                       onclick="showDeleteConfirm(${book.id})"
                       style="color: #ff4d4f;">删除</a>
                </td>
            </tr>
        </c:forEach>
        <c:if test="${empty books}">
            <tr>
                <td colspan="8" align="center">暂无图书数据</td>
            </tr>
        </c:if>
        </tbody>
    </table>
</div>

<!-- 新增图书模态窗 -->
<div class="modal-overlay" id="addOverlay"></div>
<div class="modal-window" id="addModal">
    <span class="close-btn" onclick="closeAddModal()">&times;</span>
    <h3 style="text-align: center; margin-bottom: 20px; color: #333;">添加新图书</h3>

    <form action="book?action=add" method="post">
        <div class="form-group">
            <label for="addIsbn">ISBN：</label>
            <input type="text" id="addIsbn" name="isbn" required placeholder="请输入ISBN"/>
        </div>
        <div class="form-group">
            <label for="addTitle">书名：</label>
            <input type="text" id="addTitle" name="title" required placeholder="请输入书名"/>
        </div>
        <div class="form-group">
            <label for="addAuthor">作者：</label>
            <input type="text" id="addAuthor" name="author" required placeholder="请输入作者"/>
        </div>
        <div class="form-group">
            <label for="addPublisher">出版社：</label>
            <input type="text" id="addPublisher" name="publisher" required placeholder="请输入出版社"/>
        </div>
        <div class="form-group">
            <label for="addPublishDate">出版日期：</label>
            <input type="date" id="addPublishDate" name="publishDate" required/>
        </div>
        <div class="form-actions">
            <button type="submit" class="btn btn-primary">保存</button>
            <button type="button" class="btn btn-secondary" onclick="closeAddModal()">取消</button>
        </div>
    </form>
</div>

<!-- 编辑图书模态窗 -->
<div class="modal-overlay" id="editOverlay"></div>
<div class="modal-window" id="editModal">
    <span class="close-btn" onclick="closeEditModal()">&times;</span>
    <h3 style="text-align: center; margin-bottom: 20px; color: #333;">修改图书信息</h3>

    <form action="book?action=update" method="post">
        <input type="hidden" id="editId" name="id">
        <div class="form-group">
            <label for="editIsbn">ISBN：</label>
            <input type="text" id="editIsbn" name="isbn" required placeholder="请输入ISBN"/>
        </div>
        <div class="form-group">
            <label for="editTitle">书名：</label>
            <input type="text" id="editTitle" name="title" required placeholder="请输入书名"/>
        </div>
        <div class="form-group">
            <label for="editAuthor">作者：</label>
            <input type="text" id="editAuthor" name="author" required placeholder="请输入作者"/>
        </div>
        <div class="form-group">
            <label for="editPublisher">出版社：</label>
            <input type="text" id="editPublisher" name="publisher" required placeholder="请输入出版社"/>
        </div>
        <div class="form-group">
            <label for="editPublishDate">出版日期：</label>
            <input type="date" id="editPublishDate" name="publishDate" required/>
        </div>
        <div class="form-actions">
            <button type="submit" class="btn btn-primary">更新</button>
            <button type="button" class="btn btn-secondary" onclick="closeEditModal()">取消</button>
        </div>
    </form>
</div>

<!-- 删除确认框 -->
<div class="modal-overlay" id="deleteOverlay"></div>
<div class="confirm-dialog" id="deleteConfirm">
    <p>确定要删除该图书吗？此操作不可撤销。</p>
    <input type="hidden" id="deleteId">
    <button class="btn btn-danger" onclick="confirmDelete()">确认删除</button>
    <button class="btn btn-secondary" onclick="cancelDelete()">取消</button>
</div>

<!-- 批量上传模态框 -->
<div class="modal-overlay" id="uploadOverlay"></div>
<div class="modal-window" id="uploadModal">
    <span class="close-btn" onclick="closeUploadModal()">&times;</span>
    <h3 style="text-align: center; margin-bottom: 20px; color: #333;">批量上传图书</h3>

    <div style="margin-bottom: 20px; padding: 15px; background-color: #f5f7fa; border-radius: 6px;">
        <p>请先下载模板，按格式填写数据后上传</p>
        <a href="book?action=downloadTemplate" class="btn btn-secondary" style="margin-top: 10px;">
            下载上传模板
        </a>
    </div>

    <form action="book?action=importExcel" method="post" enctype="multipart/form-data">
        <div class="form-group">
            <label for="excelFile">选择Excel文件：</label>
            <input type="file" id="excelFile" name="excelFile" accept=".xlsx,.xls" required />
            <p style="margin-top: 5px; font-size: 12px; color: #666;">
                支持.xlsx和.xls格式，文件大小不超过10MB
            </p>
        </div>
        <div class="form-actions">
            <button type="submit" class="btn btn-primary">上传并导入</button>
            <button type="button" class="btn btn-secondary" onclick="closeUploadModal()">取消</button>
        </div>
    </form>
</div>

<script>
    // 新增图书模态窗控制
    function openAddModal() {
        document.getElementById("addOverlay").style.display = "block";
        document.getElementById("addModal").style.display = "block";
    }

    function closeAddModal() {
        document.getElementById("addOverlay").style.display = "none";
        document.getElementById("addModal").style.display = "none";
    }

    // 编辑图书模态窗控制
    function openEditModal(id, isbn, title, author, publisher, publishDate) {
        document.getElementById("editId").value = id;
        document.getElementById("editIsbn").value = isbn;
        document.getElementById("editTitle").value = title;
        document.getElementById("editAuthor").value = author;
        document.getElementById("editPublisher").value = publisher;
        document.getElementById("editPublishDate").value = publishDate;

        document.getElementById("editOverlay").style.display = "block";
        document.getElementById("editModal").style.display = "block";
    }

    function closeEditModal() {
        document.getElementById("editOverlay").style.display = "none";
        document.getElementById("editModal").style.display = "none";
    }

    // 删除确认框控制
    function showDeleteConfirm(id) {
        document.getElementById("deleteId").value = id;
        document.getElementById("deleteOverlay").style.display = "block";
        document.getElementById("deleteConfirm").style.display = "block";
    }

    function confirmDelete() {
        const id = document.getElementById("deleteId").value;
        window.location.href = "book?action=delete&id=" + id;
    }

    function cancelDelete() {
        document.getElementById("deleteOverlay").style.display = "none";
        document.getElementById("deleteConfirm").style.display = "none";
    }

    // 批量上传模态框控制
    function showUploadModal() {
        document.getElementById("uploadOverlay").style.display = "block";
        document.getElementById("uploadModal").style.display = "block";
    }

    function closeUploadModal() {
        document.getElementById("uploadOverlay").style.display = "none";
        document.getElementById("uploadModal").style.display = "none";
    }

    // 点击遮罩层关闭事件
    document.getElementById("addOverlay").addEventListener("click", closeAddModal);
    document.getElementById("editOverlay").addEventListener("click", closeEditModal);
    document.getElementById("deleteOverlay").addEventListener("click", cancelDelete);
    document.getElementById("uploadOverlay").addEventListener("click", closeUploadModal);

    // ESC键关闭所有窗口
    document.addEventListener("keydown", function (e) {
        if (e.key === "Escape") {
            closeAddModal();
            closeEditModal();
            cancelDelete();
            closeUploadModal();
        }
    });
</script>
